<template>
  <main class="wss-container">
    <div class="label-box-content">
      <NewCard title="专家列表">
        <ComForm
          :list="comForm"
        ></ComForm>
      </NewCard>

      <NewCard title="内容">
        <ComTable
          :config="config"
          :pagination="{
            total: pageing.total,
            pageNum: pageing.pageNum,
            pageSize: pageing.pageSize,
          }"
          :list="labelData"
          :modes="tableModes"
          >
            <el-table-column
              #default="{ row }"
              align="left"
              width="100"
              label="操作"
            >
              <template>
                <span
                  style="color: #1890ff"
                  >查看</span
                >
                <span
                  style="color: #1890ff"
                  >编辑</span
                >
                <span
                  style="color: #1890ff"
                  >删除</span
                >
              </template>
            </el-table-column>
        </ComTable>
      </NewCard>

      <!-- 编辑专家信息 -->
        <el-button type="text" @click="dialogFormVisible = true">编辑专家信息</el-button>
        <div class="expertList">
          <el-dialog :visible.sync="dialogFormVisible" title="编辑专家信息">
            <el-form :model="dialogForm" :rules="rules">
              <el-form-item label="专家头像" :label-width="formLabelWidth" >
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  list-type="picture">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">图片尺寸300*300，支持png/jpg格式，大小不超过500KB</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="专家姓名" :label-width="formLabelWidth" >
                <el-input v-model="dialogForm.pricingrule" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="专家类型" :label-width="formLabelWidth" prop="expertType">
                <el-select v-model="dialogForm.type">
                  <el-option label="法务" value="toutiao"></el-option>
                  <el-option label="税务" value="wenda"></el-option>
                  <el-option label="财务" value="fatiao"></el-option>
                  <el-option label="其他" value="chaojihetong"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="擅长领域" :label-width="formLabelWidth" prop="skilledField">
                <el-select v-model="dialogForm.type">
                  <el-option label="用工" value="toutiao"></el-option>
                  <el-option label="合同" value="wenda"></el-option>
                  <el-option label="专利" value="fatiao"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" :label-width="formLabelWidth" >
                <el-tag
                  v-for="fieldLabel in fieldLabels"
                  :key="fieldLabel.name"
                  closable
                  :type="fieldLabel.type"
                  effect="Plain">
                  {{fieldLabel.name}}
                </el-tag>
              </el-form-item>
              <el-form-item label="专家职称" :label-width="formLabelWidth" prop="expertsTitle">
                <el-select v-model="dialogForm.type">
                  <el-option label="合同纠纷" value="toutiao"></el-option>
                  <el-option label="跨境电商" value="wenda"></el-option>
                  <el-option label="一带一路" value="fatiao"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="专家等级" :label-width="formLabelWidth" prop="expertRating">
                <el-select v-model="dialogForm.type">
                  <el-option label="甲级" value="toutiao"></el-option>
                  <el-option label="乙级" value="wenda"></el-option>
                  <el-option label="丙级" value="fatiao"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="专业年资" :label-width="formLabelWidth" prop="aptitudes">
                <el-input v-model.number="dialogForm.business" autocomplete="off" placeholder="请输入专业年资"></el-input>
              </el-form-item>
              <el-form-item label="标签" :label-width="formLabelWidth" prop="label">
                <el-select v-model="dialogForm.type">
                  <el-option label="合同纠纷" value="toutiao"></el-option>
                  <el-option label="劳务纠纷" value="wenda"></el-option>
                  <el-option label="跨境电商" value="fatiao"></el-option>
                  <el-option label="一带一路" value="fatiao"></el-option>
                  <el-option label="房地产开发" value="fatiao"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" :label-width="formLabelWidth" >
                <el-tag
                  v-for="label in labels"
                  :key="label.name"
                  closable
                  :type="label.type"
                  effect="Plain">
                  {{label.name}}
                </el-tag>
              </el-form-item>
              <el-form-item label="证书编号" :label-width="formLabelWidth" >
                <el-input v-model="dialogForm.business" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="专家简介" :label-width="formLabelWidth" prop="expertInfo">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="textarea">
                </el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      <!-- 编辑专家信息 end -->

      <!-- 查看专家个人信息 -->
      <router-link :to="{name:'expertInfo'}">专家个人信息</router-link>
      <!-- 查看专家个人信息 end-->

    </div>
  </main>
</template>

<script>
import NewCard from '../../../../components/newCard.vue'
import ComForm from '../../../../components/comForm.vue'
import ComTable from '../../../../components/comTable.vue'
export default {
    name:'expertList',
    components:{NewCard,ComForm,ComTable},
    data(){
      return{
        // 表单选项
        comForm: {
          modes: [
            {
              placeholder: "请输入专家编号",
              formType: "input",
              mode: "content",
              label: "专家编号",
              value: "",
            },
            {
              placeholder: "请输入专家姓名",
              formType: "input",
              mode: "content",
              label: "专家姓名",
              value: "",
            },
            {
              placeholder: "请选择性别",
              formType: "select",
              mode: "type",
              label: "性别",
              value: "",
              select: [],
            },
            {
              placeholder: "请选择专家类型",
              formType: "select",
              mode: "type",
              label: "专家类型",
              value: "",
              select: [],
            },
            {
              placeholder: "请输入专家职称",
              formType: "input",
              mode: "content",
              label: "专家职称",
              value: "",
            },
            {
              placeholder: "请选择专家等级",
              formType: "select",
              mode: "type",
              label: "专家等级",
              value: "",
              select: [],
            },
            {
              placeholder: "请选择擅长类别",
              formType: "select",
              mode: "type",
              label: "擅长类别",
              value: "",
              select: [],
            },
            {
              pickerType: "daterange",
              startPlaceholder: "开始日期",
              endPlaceholder: "结束日期",
              formType: "datePicker",
              placeholder: "处理日期",

              rangeSeparator: "至",
              mode: "tempDate",
              label: "创建时间",
              value: null,
            },
          ],
        },
        // 表格配置
        config: {
          quanxian: "base:label:add",
          // border: true,
          isAdd: true,
          loading: false,
        },
        // 分页参数
        pageing: { pageNum: 1, pageSize: 10, total: 0 },
        // 表格参数
        tableModes: [
          {
            label: "编号",
            mode: "number",
          },
          {
            label: "姓名",
            mode: "name",
          },
          {
            label: "性别",
            mode: "sex",
          },
          {
            label: "专家类型",
            mode: "expertType",
          },
          {
            label: "职称",
            mode: "jobTitle",
          },
          {
            label: "专家等级",
            mode: "expertRating",
          },
          {
            label: "擅长类别",
            mode: "goodClass",
          },
          {
            label: "标签",
            mode: "label",
          },
          {
            label: "评论权限",
            mode: "revPrivilege",
          },
          {
            label: "创建时间",
            mode: "creationTime",
          },
        ],
        //编辑专家信息 提示框显示状态
        dialogFormVisible: false,
        dialogForm: {
          headPort: '',
          expertName: '',
          expertType: '',
          skilledField: '',
          expertsTitle: '',
          expertRating: '',
          aptitudes: '',
          label: '',
          serialNum: '',
          expertInfo: '',
        },
        //表单判断
        rules: {
          expertType: [
            { required: true, message: '请选择专家类型', trigger: 'blur',type: "change",},
          ],
          skilledField: [
            { required: true, message: '请选择擅长领域', trigger: 'blur',type: "change",},
          ],
          expertsTitle: [
            { required: true, message: '请选择专家职称', trigger: 'blur',type: "change",},
          ],
          expertRating: [
            { required: true, message: '请选择专家等级', trigger: 'blur',type: "change",},
          ],
          aptitudes: [
            { required: true, message: '请输入专业年资', trigger: 'blur',type: "number",},
          ],
          label: [
            { required: true, message: '请选择标签', trigger: 'blur',type: "change",},
          ],
          expertInfo: [
            { required: true, message: '请输入专家简介', trigger: 'blur',type: "string",},
          ],
        },
        //编辑专家信息 标题宽度
        formLabelWidth: '80px',
        //专家头像上传
        fileList: [
          {
            name: 'food.jpeg', 
            url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
          }, 
        ],
        //擅长领域-可移除标签
        fieldLabels: [
          { name: '合同'},
          { name: '用工'},
        ],
        //标签-可移除标签
        labels: [
          { name: '合同纠纷'},
          { name: '房地产开发'},
          { name: '跨境电商'},
          { name: '一带一路'},
        ],
      }
    }
}
</script>

<style scoped>
  .label-box-content >>> .el-card{
    margin-bottom: 30px;
  }
  .label-box-content >>> .el-form .left{
    flex-wrap: wrap;
  }
  .el-upload__tip{
    display: initial;
    margin-left: 10px;
  }
  .el-select{
    display: block;
  }
  .el-dialog__body{
    margin: 30px 0;
  }
  .expertList .el-form {
    height: 500px;
    overflow-y: auto;
    padding: 0px 20px;
  }
</style>